<template>
    <div>
        <el-form ref="qjuerfrom" inline="true" :model="user">
            <el-form-item label="名字">
                <el-input v-model="user.realname"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getss()">查询</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="getadd()">新增</el-button>
            </el-form-item>
        </el-form>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="birthday"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="account"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="bmid"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="realname"
                label="名字">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别" :formatter="formattersex">
        </el-table-column>
        <el-table-column label="操作">
<!--            <template slot="header">-->
<!--                <el-input-->
<!--                        v-model="ruleForm.realname"-->
<!--                        size="mini"-->
<!--                        placeholder="输入关键字搜索"/>-->
<!--            </template>-->
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="update(scope.row.id)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="open(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                layout="prev, pager, next"
                :total="total"
                @current-change="changPage"
                @prev-click="changPage1"
                @next-click="changPage2"
                :page-size="user.size">
        </el-pagination>

        <el-dialog :title="titel" :visible.sync="sade">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="account" prop="account">
                    <el-input v-model="ruleForm.account"></el-input>
                </el-form-item>
                <el-form-item label="bmid" prop="bmid">
                    <el-select v-model="ruleForm.bmid" placeholder="请选择">
                        <el-option
                                v-for="options in rolelist"
                                :key="options.id"
                                :label="options.bmname"
                                :value="options.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="realname" prop="realname">
                    <el-input v-model="ruleForm.realname"></el-input>
                </el-form-item>
                <el-form-item label="sex" prop="sex">
                    <el-radio v-model="ruleForm.sex" label="1" >男</el-radio>
                    <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
                </el-form-item>
                <el-form-item label="birthday" prop="birthday">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="phone" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="sade = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import {add, list,get,del,update} from "../../api/user";
    import {rolelist} from "../../api/role";

    export default {
        name: "list-index",
        data() {
            return {
                tableData: [],
                sade: false,
                ruleForm: {},
                rolelist: {},
                titel: '',
                total:0,
                user:{
                    realname:'',
                    page:1,
                    size:2
                },
                rules:{
                    account: [
                        { required: true, message: '请输入account', trigger: 'blur' }
                    ],
                    bmid: [
                        { required: true, message: '请选择活动区域', trigger: 'blur' }
                    ],
                    realname: [
                        { required: true, message: '请输入名字', trigger: 'blur' }
                    ],
                    // birthday: [
                    //     { type: 'date', required: true, message: '请选择日期', trigger: 'blur' }
                    // ],
                    phone: [
                        { required: true, message: '请选择电话', trigger: 'blur' }
                    ],
                }
            }
        },
        created() {
            this.getlist();
            rolelist().then(reop => {
                this.rolelist = reop;
            })
        },
        methods: {
            getlist() {
                list(this.user).then(result => {
                    this.tableData = result.list;
                    this.total = result.total;
                })
            },
            submitForm() {
                this.sade = false;
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (this.ruleForm.id) {
                            update(this.ruleForm).then(req => {
                                if (req == 1) {
                                    this.$message.success('修改成功');
                                    this.getlist();
                                } else {
                                    this.$message.success('修改失败');
                                }
                            })
                        } else {
                            add(this.ruleForm).then(result => {
                                if (result == 1) {
                                    this.$message.success('添加成功');
                                    this.getlist();
                                } else {
                                    this.$message.success('添加失败');
                                }
                            })
                        }
                    }
                });

            },
            getadd() {
                this.titel = "添加";
                this.sade = true;
                this.ruleForm = {};
                this.ruleForm.sex = String(1);
            },
            update(id) {
                this.titel = "修改";
                this.sade = true;
                get(id).then(req => {
                    this.ruleForm = req;
                    this.ruleForm.sex = String(req.sex);
                })
            },
            open(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(id).then(req => {
                        if (req == 1) {
                            if (req == 1) {
                                this.$message.success('删除成功');
                                this.getlist();
                            } else {
                                this.$message.success('删除失败');
                            }
                        }
                    })
                })
            },
            formattersex(row){
                if(row.sex == 1){
                    return '男';
                }else if(row.sex == 0){
                    return '女';
                }else {
                    return '未知'
                }
            },
            getss(){
                this.user.page = 1;
                this.getlist()
            },
            changPage(page){
                this.user.page = page;
                this.getlist();
            },
            changPage1(page){
                this.user.page = page-1;
                this.getlist();
            },
            changPage2(page){
                this.user.page = page+1;
                this.getlist();
            }
        }
    }

</script>

<style scoped>

</style>